<template>
    <el-dialog
            v-model="dialogVisible"
            title="申请休假"
            width="60%"
            @close="close"
    >
        <el-form
                ref="addFormRef"
                :model="addForm"
                :rules="addFormRules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="休假类型" prop="applyType">
                <el-radio-group v-model="addForm.applyType">
                    <el-radio :label="1">事假</el-radio>
                    <el-radio :label="2">调休</el-radio>
                    <el-radio :label="3">年假</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="休假时间">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="" prop="startTime">  <el-date-picker
                                v-model="addForm.startTime"
                                type="date"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择开始时间"
                                :disabled-date = "disabledStartDate"
                        />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">-</el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="endTime">  <el-date-picker
                                v-model="addForm.endTime"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择结束时间"
                                :disabled-date = "disabledEndDate"
                        />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="休假时长" prop="">
                {{addForm.leaveTime}}天
            </el-form-item>
            <el-form-item label="休假原因" prop="reasons">
                <el-input type="textarea" :rows="3" v-model="addForm.reasons" placeholder="请输入休假原因"/>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import dayjs from 'dayjs'

    const { proxy } = getCurrentInstance()
    defineOptions({
        name: 'ApplyLeaveDialog',
        inheritAttrs: false,
    })

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    })




    const dialogVisible = ref(false)
    const addFormRef = ref()
    const addForm = ref({
        applyType: 1,
        startTime: '',
        endTime: ''
    })
    const addFormRules = ref({
        applyType: [
            { required: true, message: '请选择休假类型', trigger: ['blur', 'change']}
        ],
        startTime: [
            { required: true, message: '请选择开始时间', trigger: ['blur', 'change']}
        ],
        endTime: [
            { required: true, message: '请选择结束时间', trigger: ['blur', 'change']}
        ],
    })
    const emit = defineEmits(['update:visible', 'submit'])

    watch(() => [props.visible, addForm.value.startTime,  addForm.value.endTime], (val) => {
        console.log(props.visible, val[0]);
        console.log(val[1])
        console.log(val[2])
        dialogVisible.value = val[0]
        // 计算日期差
        if (val[1] && val[2]) {
            dateChange(val[1], val[2])
        }
    })
    const close = () => {
        emit("update:visible", false)
    }
    const handleClose = () => {
        if (addFormRef.value) {
            addFormRef.value.resetFields()
        }
        close()
    }
    const handleSubmit = () => {
        addFormRef.value.validate(async valid => {
            if (valid) {
                const params = toRaw(addForm.value)
                // params.action = currentAction.value
                await proxy.$api.addLeave(params)
                proxy.$message.success(`申请休假成功`)
                handleClose()
                emit('submit')
            }
        })
    }
    const disabledStartDate = (value) => {
        if (value && addForm.value.endTime) {
            return value.getTime() > new Date(addForm.value.endTime).getTime() - 24*60*60*1000
        }
    }
    const disabledEndDate = (value) => {
        if (value && addForm.value.startTime) {
            return value.getTime() < new Date(addForm.value.startTime).getTime()
        }
    }
    const dateChange = (start, end) => {
        // console.log('=>', start, end)
        addForm.value.leaveTime = dayjs(end).diff(start, 'day')
    }

    const detailDialogVisible = ref(false)

</script>

<style scoped>

</style>
